<template>
  <!-- 全局固定导航栏组件 -->
  <!-- #ifdef MP-WEIXIN -->
  <uv-navbar 
    :fixed="true" 
    :title="title" 
    :left-arrow="showLeftArrow"
    :left-icon="leftIcon"
    :bg-color="bgColor"
    :title-color="titleColor"
    :safe-area-inset-top="safeAreaInsetTop"
    @leftClick="handleLeftClick"
  />
  <!-- #endif -->
  
  <!-- #ifdef MP-ALIPAY -->
  <view class="alipay-navbar-wrapper">
    <view class="alipay-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <view class="alipay-navbar" :style="{ backgroundColor: bgColor, height: navbarHeight + 'px' }">
      <view class="alipay-navbar-content">
        <view class="alipay-navbar-left" v-if="showLeftArrow" @tap="handleLeftClick">
          <uv-icon :name="leftIcon" :color="titleColor" size="20"></uv-icon>
        </view>
        <view class="alipay-navbar-left-placeholder" v-else></view>
        <view class="alipay-navbar-title" :style="{ color: titleColor }">
          {{ title }}
        </view>
        <view class="alipay-navbar-right">
          <slot name="right"></slot>
        </view>
      </view>
    </view>
  </view>
  <!-- #endif -->
  
  <!-- #ifdef H5 -->
  <uv-navbar 
    :fixed="true" 
    :title="title" 
    :left-arrow="showLeftArrow"
    :left-icon="leftIcon"
    :bg-color="bgColor"
    :title-color="titleColor"
    :safe-area-inset-top="safeAreaInsetTop"
    @leftClick="handleLeftClick"
  />
  <!-- #endif -->
</template>

<script setup>
import { defineProps, defineEmits, ref, onMounted } from 'vue'
import { smartBack } from '@/utils/navigation'

// 定义属性
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 是否显示左侧返回箭头
  showLeftArrow: {
    type: Boolean,
    default: true
  },
  // 左侧图标
  leftIcon: {
    type: String,
    default: 'arrow-left'
  },
  // 背景色
  bgColor: {
    type: String,
    default: '#ffffff'
  },
  // 标题颜色
  titleColor: {
    type: String,
    default: '#333333'
  },
  // 是否适配状态栏
  safeAreaInsetTop: {
    type: Boolean,
    default: true
  },
  // 是否使用自定义左侧点击处理
  customLeftClick: {
    type: Boolean,
    default: false
  }
})

// 定义事件
const emit = defineEmits(['leftClick'])

// 支付宝小程序导航栏高度
const statusBarHeight = ref(0)
const navbarHeight = ref(48) // 支付宝小程序标准导航栏高度

// #ifdef MP-ALIPAY
onMounted(() => {
  // 获取系统信息
  uni.getSystemInfo({
    success: (res) => {
      statusBarHeight.value = res.statusBarHeight || 0
      // 支付宝小程序导航栏高度通常是48px
      navbarHeight.value = 48
    }
  })
})
// #endif

// 左侧点击事件处理
const handleLeftClick = () => {
  // 如果父组件没有监听leftClick事件，则使用默认的智能返回
  if (!props.customLeftClick) {
    smartBack()
  } else {
    emit('leftClick')
  }
}
</script>

<style lang="scss" scoped>
// 通用样式
:deep(.uv-navbar) {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999 !important;
}

/* #ifdef MP-ALIPAY */
.alipay-navbar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: transparent;
}

.alipay-status-bar {
  width: 100%;
  background-color: transparent;
}

.alipay-navbar {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}

.alipay-navbar-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  box-sizing: border-box;
}

.alipay-navbar-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  transition: background-color 0.3s ease;
  
  &:active {
    background-color: rgba(0, 0, 0, 0.1);
  }
}

.alipay-navbar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 1;
  margin: 0 32rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alipay-navbar-left-placeholder {
  width: 80rpx;
  height: 80rpx;
}

.alipay-navbar-right {
  width: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* #endif */
</style> 